<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>CrowX</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" id="color" href="assets/css/red.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery1.7.2.js"></script>
<script type="text/javascript" src="assets/js/color_switcher.js"></script>
</head>

<body>
<div class="color-switcher" id="choose_color"> <a href="#." class="picker_close"></a>
  <ul>
    <li><a href="#." class="red" id="red"></a></li>
    <li><a href="#." class="green" id="green"></a></li>
    <li><a href="#." class="blue" id="blue"></a></li>
    <li><a href="#." class="orange" id="orange"></a></li>
    <li><a href="#." class="cyan" id="cyan"></a></li>
    <li><a href="#." class="light_pink" id="light_pink"></a></li>
  </ul>
  <div class="clr"></div>
</div>
<!--end color-switcher-->

<header class="header">
  <div class="top_row">
    <div class="container">
      <section class="row-fluid">
        <div class="span12">
          <p class="top_number"><i class="icon-mobile-phone"></i>+123 456 7980 or +123 456 7999</p>
          <ul class="top_social">
            <li><a href="#." class="fb"><i class="icon-facebook"></i></a></li>
            <li><a href="#." class="twtr"><i class="icon-twitter"></i></a></li>
            <li><a href="#." class="gmail"><i class="icon-google-plus"></i></a></li>
            <li><a href="#." class="pintrest"><i class="icon-pinterest"></i></a></li>
            <li><a href="#." class="rss"><i class="icon-rss"></i></a></li>
          </ul>
          <div class="clr"></div>
        </div>
        <!--end span12-->
        
        <div class="clr"></div>
      </section>
      <!--end row-fluid-->
      
      <div class="clr"></div>
    </div>
    <!--end container-->
    
    <div class="clr"></div>
  </div>
  <!--end top_row-->
  <nav>
    <div class="navigation_bg">
      <div class="container">
        <div class="row-fluid">
          <div class="span3"><a href="index.html" class="logo"><img src="assets/images/logo.png" alt="image" /></a></div>
          <div class="span9"> 
            
            <!-- Navbar
================================================== -->
            <div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class= 			 					"icon-bar"></span> </button>
                  <div class="nav-collapse collapse">
                    <ul class="nav">
                      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<b class="caret"></b><br />
                        <span>start here</span></a>
                        <ul class="dropdown-menu">
                          <li><a href="index.html">Home 1</a></li>
                          <li><a href="index2.html">Home 2</a></li>
                        </ul>
                      </li>
                      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">pages<b class="caret"></b><br />
                        <span>what we do</span></a>
                        <ul class="dropdown-menu">
                          <li><a href="about_us.html">About us</a></li>
                          <li><a href="contact_us.html">Contact us</a></li>
                          <li><a href="faq.html">Faq</a></li>
                          <li><a href="shortcodes.html">Shortcodes</a></li>
                          <li><a href="icons.html">Awsome Icons</a></li>
                          <li><a href="tables.html">Tables</a></li>
                        </ul>
                      </li>
                      <li class="active dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">portfolio<b class="caret"></b><br />
                        <span>result of our work</span></a>
                        <ul class="dropdown-menu">
                          <li><a href="portfolio1.html">Portfilio one</a></li>
                          <li><a href="portfolio2.html">Portfilio two</a></li>
                          <li><a href="portfolio3.html">Portfilio three</a></li>
                          <li><a href="portfolio4.html">Portfilio four</a></li>
                        </ul>
                      </li>
                      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">blog<b class="caret"></b><br />
                        <span>what we think</span></a>
                        <ul class="dropdown-menu">
                          <li><a href="blog1.html">Blog right</a></li>
                          <li><a href="blog2.html">Blog left</a></li>
                          <li><a href="blog_detail1.html">Blog right detail</a></li>
                          <li><a href="blog_detail2.html">Blog left detail</a></li>
                        </ul>
                      </li>
                      <li class=""> <a href="contact_us.html">contact us<br />
                        <span>get in touch</span></a> </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clr"></div>
        </div>
        <!--end row-fluid-->
        
        <div class="clr"></div>
      </div>
      <!--end container-->
      
      <div class="clr"></div>
    </div>
  </nav>
  <!--end navigation_bg-->
  
  <div class="clr"></div>
</header>
<!--end header-->

<div class="sub_page_top">
  <div class="container">
    <section class="row-fluid">
      <div class="span8">
        <header>
          <h1 class="sub_page_hdng">Portfolio Four</h1>
        </header>
        <p>It is a long established fact that a reader will content of a page when looking at its layout. </p>
      </div>
      <div class="span4">
        <ul class="breadcrumb">
          <li><a href="index.html">Home</a> <span class="divider">/</span></li>
          <li><a href="portfolio4.html">Home</a> <span class="divider">/</span></li>
          <li class="active">Portfolio</li>
        </ul>
      </div>
      <div class="clr"></div>
    </section>
    <!--end row-fluid-->
    
    <div class="clr"></div>
  </div>
  <!--end container-->
  
  <div class="clr"></div>
</div>
<!--end sub_page_top-->

<div class="container">
  <section class="portfolio_section">
        <ul class="filter group">
          <li class="current all"><a href="#">All</a></li>
          <li class="web_design"><a href="#">Web Design</a></li>
          <li class="art"><a href="#">Art Design</a></li>
          <li class="photography"><a href="#">Photography</a></li>
          <li class="branding"><a href="#">Branding</a></li>
        </ul>
    
    <!-- Portfolio Items -->
    <ul class="portfolio group portfolio_4">
      <li class="item" data-id="id-1" data-type="branding">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img1.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>branding</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-2" data-type="web_design">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img2.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Web Design</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-3" data-type="photography">
        <article> <a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img3.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>photography</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-4" data-type="branding">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img4.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>branding</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-5" data-type="branding">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img5.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>branding</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-6" data-type="photography">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img6.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>photography</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-7" data-type="web_design">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img7.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Web Design</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-8" data-type="art">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img8.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Art</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-9" data-type="web_design">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img9.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Web Design</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-10" data-type="art"> <a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img10.jpg" alt="image" /></a>
        <div class="portfolio_contant">
          <header>
            <h3>Art</h3>
          </header>
          <p>Lorem Ipsum is simply dummy text
            of the printing.</p>
        </div>
        
        <!--end portfolio_contant--> 
      </li>
      <li class="item" data-id="id-11" data-type="photography">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img11.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Photography</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
      <li class="item" data-id="id-12" data-type="art">
        <article><a href="assets/images/popup_img.jpg" data-rel="prettyPhoto"><img src="assets/images/portfolio4_img12.jpg" alt="image" /></a>
          <div class="portfolio_contant">
            <header>
              <h3>Art</h3>
            </header>
            <p>Lorem Ipsum is simply dummy text
              of the printing.</p>
          </div>
          
          <!--end portfolio_contant--> 
        </article>
      </li>
    </ul>
    <div class="clr"></div>
  </section>
  <!--end portfolio_section-->
  
  <div class="clr"></div>
</div>
<!--end container-->

<footer class="footer">
  <div class="container">
    <section class="row-fluid">
      <div class="span3 usefull_links">
        <h2>Usefull Links</h2>
        <ul>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Home</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>About Us</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Services</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Portfolio</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Blog</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Contact Us</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Documentation</a></li>
          <li><a href="#."><i class="icon-long-arrow-right"></i>Wordpress</a></li>
        </ul>
      </div>
      <!--end span3 usefull_links-->
      
      <div class="span3 latest_tweets">
        <h2>Latest Tweets</h2>
        <i class="icon-twitter"></i>
        <p><span>@Smith Apple</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
          <span class="date">June 29, 2013</span></p>
        <div class="clr"></div>
        <i class="icon-twitter"></i>
        <p><span>@Smith Apple</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
          <span class="date">June 29, 2013</span></p>
        <div class="clr"></div>
      </div>
      <!--end span3 latest_tweets-->
      
      <div class="span3 about_us">
        <h2>About Us</h2>
        <ul>
          <li class="one"><i class="icon-mobile-phone"></i>(+01) 123 456 7890</li>
          <li class="two"><a href="#."><i class="icon-envelope"></i>support@crowx.com</a></li>
          <li class="three"><a href="#."><i class="icon-globe"></i>www.crowx.com</a></li>
          <li class="four"><i class="icon-home"></i>786 Some Place Nice, Rd Nice
            State, Big Country 7860</li>
        </ul>
        <ul class="footer_social">
          <li><a href="#." class="fb"><i class="icon-facebook"></i></a></li>
          <li><a href="#." class="twtr"><i class="icon-twitter"></i></a></li>
          <li><a href="#." class="gmail"><i class="icon-google-plus"></i></a></li>
          <li><a href="#." class="pintrest"><i class="icon-pinterest"></i></a></li>
          <li><a href="#." class="rss"><i class="icon-rss"></i></a></li>
        </ul>
        <div class="clr"></div>
      </div>
      <!--end span3 about_us-->
      
      <div class="span3 recent_post">
        <h2>Recent Posts Widget</h2>
        <div class="footer_post"> <img src="assets/images/recent_widget_1.jpg" alt="image" />
          <p>Lorem ipsum dolor sit amet
            consectetur text.<span>June 29, 2013</span></p>
          <div class="clr"></div>
        </div>
        <!--end footer_post-->
        
        <div class="footer_post"> <img src="assets/images/recent_widget_2.jpg" alt="image" />
          <p>Lorem ipsum dolor sit amet
            consectetur text.<span>June 29, 2013</span></p>
          <div class="clr"></div>
        </div>
        <!--end footer_post-->
        
        <div class="footer_post"> <img src="assets/images/recent_widget_3.jpg" alt="image" />
          <p>Lorem ipsum dolor sit amet
            consectetur text.<span>June 29, 2013</span></p>
          <div class="clr"></div>
        </div>
        <!--end footer_post-->
        
        <div class="clr"></div>
      </div>
      <!--end span3 recent_post-->
      
      <div class="clr"></div>
    </section>
    <!--end row-fluid-->
    
    <div class="clr"></div>
  </div>
  <!--end container-->
  
  <p class="copyright">Copyright &copy; 2013 CrowX. All right reserved.</p>
  <div class="clr"></div>
</footer>
<script src="assets/js/bootstrap-transition.js"></script> 
<script src="assets/js/bootstrap-collapse.js"></script> 
<script src="assets/js/bootstrap-dropdown.js"></script> 
<script type="text/javascript" src="assets/js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="assets/js/jquery.quicksand.js"></script> 
<script type="text/javascript" src="assets/js/jquery.easing.1.3_nimbl.js"></script> 
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>
